<template>
  <!-- 下方折线图 -->
  <el-row class="secondBottomWrap">
    <el-row type="flex" justify="space-between">
      <el-col style="color: #ffffff;font-size: 16px;padding-bottom: 4px">
        {{ $store.getters.getLocation }}在线率趋势图ㅡ{{ year }}年{{ month }}月
      </el-col>
      <el-col align="right">
        <span style="color:#ffffff;padding-right:30px">在线率=在线量/纳管量</span>
      </el-col>
    </el-row>
    <SecondLineCharts
      :chartData="chartData"
      :height="'100%'"
    />
  </el-row>
</template>

<script>
  import SecondLineCharts from './SecondLineCharts'
  export default {
    name: "SecondBottomWrap",
    components: {
      SecondLineCharts
    },
    data() {
      return {
        year: new Date().getFullYear(),
        month: new Date().getMonth() + 1,
        chartData: {
          dataY: [],
          dataLine: []
        },
        code: null
      }
    },
    created() {
      this.$bus.$off('provinceChangedSecond')
      this.$bus.$on('provinceChangedSecond', this.getTrend)
    },
    methods: {
      getTrend(code){
        if (code) {
          this.code = code
        }
        window._api.apiProbeTrend({ code: this.code }).then(res => {
          if (res.state === 'ok') {
            this.chartData.dataY = []
            this.chartData.dataLine = []
            res.data.sort((a,b) =>  new Date(a.day) - new Date(b.day)).map(item => {
              this.chartData.dataLine.push(item.percent)
              this.chartData.dataY.push(item.day.substring(8) + '日')
            })
          } else {
            this.$message.warning('数据异常')
          }
        })
      },
    }
  }
</script>

<style scoped>
.secondBottomWrap{
  height: 28vh;
  padding: 14px;
  background: rgba(14,22,95,0.4);
  border: 1px solid rgba(14,101,187,0.66);
}
</style>
